@mixin vuefinder-theme($theme-name, $primary, $background, $hover,$border : darken($background, 7)) {
    .#{$theme-name} {
        border: 1px solid $border;
        .vuefinder-footer {
            border-top: 1px solid $border;
            background-color: $background;
        }
    
        #{"/deep/"} .vuefinder-button {
            color: $primary;
            border: 1px solid $border;
            background-color: lighten($background, 2);
            &:hover {
                background-color: $hover;
            }
        }
    
        #{"/deep/"} {
            .vuefinder-icon, 
            .vuefinder-list-view-sort-bar 
            .vuefinder-breadcrumb,
            .vuefinder-breadcrumb-item,
            .vuefinder-modal-header,
            .vuefinder-modal-body,
            .vuefinder-footer,
            .vuefinder-breadcrumb + .vuefinder-breadcrumb::before {
                color: $primary;
            }
    
            .vuefinder-explorer, .vuefinder-toolbar {
                background-color: lighten($background, 2);
                color:$primary
            }
    
            .vuefinder-icon.light,
            .vuefinder-breadcrumb-item:hover{
                color: lighten($primary, 10);;
            }
    
            .vuefinder-header {
                background-color:$background;
                border-bottom: 1px solid $border;
                border-top: 1px solid $border;
            }
    
            .node-selected .vuefinder-file-name span:first-child {
                background-color: $background;
                color: $primary;
                border: 1px solid $primary;
            }
    
            .vuefinder-modal-container,
            .vuefinder-file-content:hover .vuefinder-file-name span:first-child,
            .vuefinder-context-item:hover {
                background-color: $background;
            }
    
            .vuefinder-context-menu {
                border: 1px solid $border;
                background: lighten($background, 2);
                color: $primary;
            }
    
            .vuefinder-empty-list {
                color: lighten(mix($primary, $background), 10);
            }
    
            .vuefinder-sort-bar {
                border: 1px solid $border;
                color: $primary;
                background-color: $background;
            }
    
            .node-selector {
                background-color: $primary;
                border: 1px solid  darken($primary, 30);
            }
    
            .vuefinder-badge{
                background-color: mix($primary, $background);
            }
        }
    }
 }